<template>
    <div>
        <a-card>
            <div>
                <span style="font-size: 16px;font-weight: bold">当前选择的类目：</span>
                <a-breadcrumb separator=">">
                    <a-breadcrumb-item v-for="(item,index) in selectedCates">
                        <a-button type="primary"> {{item.name}}</a-button>
                    </a-breadcrumb-item>
                </a-breadcrumb>
            </div>
            <cate style="margin-top: 20px" @refreshSelectedCates="refreshSelectedCates"></cate>

            <div style="text-align: center;vertical-align: center;horiz-align: center">
                <a-button type="primary" style="width: 400px;height: 40px" @click="toPublishPage">下一步，发布商品</a-button>

            </div>
        </a-card>

    </div>
</template>

<script>
    import Cate from "../../../../components/cate/cate";

    export default {
        name: "chooseCate",
        components: {Cate},
        data() {
            return {
                selectedCate: []
            }
        },
        computed: {
            selectedCates() {
                return this.selectedCate
            }
        },
        methods: {
            refreshSelectedCates(selectedCate) {
                this.selectedCate = []
                this.selectedCate = selectedCate
                console.log(this.selectedCate)
            },
            toPublishPage() {

                if (this.selectedCate[0] && this.selectedCate[1] && this.selectedCate[2]) {

                    let url=`/publish-goods?cate1=${encodeURI(JSON.stringify(this.selectedCate[0]))}&cate2=${encodeURI(JSON.stringify(this.selectedCate[1]))}&cate3=${encodeURI(JSON.stringify(this.selectedCate[2]))}`
                    this.$router.push(encodeURI(url))


                } else {
                    this.$message.warning("请选择一个三级类目")
                }
            }
        }
    }
</script>

<style scoped>

</style>